<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="header-left">
            <!-- 面包屑导航 -->
            <div class="breadcrumb" v-if="breadcrumbs.length > 0">
              <span
                v-for="(crumb, index) in breadcrumbs"
                :key="index"
                class="breadcrumb-item"
                :class="{ clickable: crumb.clickable }"
                @click="crumb.clickable && navigateTo(crumb.path)"
              >
                {{ crumb.name }}
                <span v-if="index < breadcrumbs.length - 1" class="separator">/</span>
              </span>
            </div>
          </div>

          <div class="header-center">
            <div class="global-search">
              <input
                type="text"
                placeholder="全局搜索 [款式ID/颜色ID/名称]"
                class="input"
                v-model="globalSearchQuery"
              />
              <el-button class="btn btn-primary">
                <SearchIcon :size="14" />
              </el-button>
            </div>
          </div>

          <div class="header-right">
            <el-button class="btn" @click="navigateTo('/dictionary')">
              <PlusIcon :size="14" />
              字典维护
            </el-button>
            <el-button class="btn">
              <HelpIcon :size="14" />
              帮助
            </el-button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main">
      <router-view />
    </main>

    <!-- 版本信息 -->
    <VersionInfo @trigger-easter-egg="showEasterEgg" />

    <!-- 彩蛋弹窗 -->
    <EasterEggModal ref="easterEggModal" />

    <!-- Toast 通知 -->
    <Toast />
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useBatchStore } from './stores/batchStore'
import { SearchIcon, PlusIcon, HelpIcon } from './components/icons'
import VersionInfo from './components/VersionInfo.vue'
import EasterEggModal from './components/EasterEggModal.vue'
import Toast from './components/Toast.vue'

export default {
  name: 'App',
  components: {
    SearchIcon,
    PlusIcon,
    HelpIcon,
    VersionInfo,
    EasterEggModal,
    Toast,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const batchStore = useBatchStore()

    const globalSearchQuery = ref('')

    // 面包屑导航
    const breadcrumbs = computed(() => {
      const crumbs = []

      if (route.name === 'BatchCenter') {
        crumbs.push({ name: '批次中心', clickable: false })
      } else if (route.name === 'MatchingWorkbench') {
        const batchId = route.params.batchId
        // 优先使用全局状态中的批次名称，如果没有则使用批次ID
        const batchName =
          batchStore.currentBatchName || (batchId ? `批次 ${batchId}` : '匹配工作台')
        crumbs.push(
          { name: '批次中心', clickable: true, path: '/batch-center' },
          { name: batchName, clickable: false }
        )
      } else if (route.name === 'VectorAnnotation') {
        const { batchId, styleId, colorId } = route.params
        // 优先使用全局状态中的批次名称，如果没有则使用批次ID
        const batchName = batchStore.currentBatchName || `批次 ${batchId}`
        crumbs.push(
          { name: '批次中心', clickable: true, path: '/batch-center' },
          { name: batchName, clickable: true, path: `/matching-workbench/${batchId}` },
          { name: `${styleId}-${colorId}`, clickable: false }
        )
      } else if (route.name === 'DictionaryMaintenance') {
        crumbs.push({ name: '字典维护', clickable: false })
      } else if (route.name === 'GlobalSearch') {
        crumbs.push({ name: '全局搜索', clickable: false })
      }

      return crumbs
    })

    const navigateTo = path => {
      router.push(path)
    }

    const showEasterEgg = () => {
      // 通过ref调用彩蛋组件的show方法
      if (easterEggModal.value) {
        easterEggModal.value.show()
      }
    }

    const easterEggModal = ref(null)

    // 监听路由变化，当离开匹配工作台时清除当前批次状态
    watch(
      () => route.name,
      newRouteName => {
        if (newRouteName !== 'MatchingWorkbench' && newRouteName !== 'VectorAnnotation') {
          batchStore.clearCurrentBatch()
        }
      }
    )

    return {
      globalSearchQuery,
      breadcrumbs,
      navigateTo,
      showEasterEgg,
      easterEggModal,
    }
  },
}
</script>

<style scoped>
.header {
  background: var(--card-background);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  gap: 12px;
}

.header-center {
  flex: 1;
  max-width: 500px;
  margin: 0 20px;
}

.global-search {
  display: flex;
  gap: 8px;
}

.global-search .input {
  flex: 1;
}

.header-right {
  display: flex;
  gap: 8px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item.clickable {
  color: var(--primary-color);
  cursor: pointer;
}

.breadcrumb-item.clickable:hover {
  text-decoration: underline;
}

.separator {
  margin: 0 8px;
  color: var(--border-color);
}

.main {
  height: calc(100vh - 80px);
  overflow: hidden;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 12px;
  }

  .header-left,
  .header-center,
  .header-right {
    width: 100%;
  }

  .global-search {
    width: 100%;
  }
}
</style>
